<!--  -->
<template>
  <el-dialog
    v-model="dialogValue"
    class="my-dialog"
    :title="title"
    :width="width"
    align-center
    :before-close="handleClose"
    destroy-on-close
    :style="{ height: height + 'px' }"
  >
    <div style="height: 100%">
      <slot />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('closeFun', false)">{{ cancel }}</el-button>
        <el-button type="primary" @click="emit('closeFun', false)"> {{ confirmBut }} </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from "vue"
export default defineComponent({
  name: "MyDialog",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "500"
    },
    height: {
      type: String,
      default: "500"
    },
    title: {
      type: String,
      default: "提示"
    },
    cancel: {
      type: String,
      default: "取消"
    },
    confirmBut: {
      type: String,
      default: "关闭"
    }
  },
  setup(props, { emit }) {
    const dialogValue = ref(false)
    const handleClose = (done: any) => {
      // console.log(`output->`, done)
      done()
      emit("closeFun", false)
    }
    console.log(`output->`, props.show)
    watch(
      () => props.show,
      (newValue, oldValue) => {
        dialogValue.value = newValue
        // console.log(" message changed:", newValue)
      }
    )
    return {
      dialogValue,
      handleClose,
      emit
    }
  }
})
</script>
<style scoped lang="scss">
.my-dialog {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
::v-deep {
  .el-dialog .is-align-center .my-dialog {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
}
</style>
